<template>
  <div :class="$style.{{ camelCase componentName }}">
    <vue-grid>
      <vue-grid-row>
        <vue-grid-item fill>
          <vue-headline level="1">{{ properCase componentName }}</vue-headline>
        </vue-grid-item>

        <vue-grid-item fill>
          <vue-button color="secondary" :loading="incrementPending" @click='increment'>Increment +1</vue-button>
          <br />
          <br />
        </vue-grid-item>
        <vue-grid-item fill>
          <vue-button color="primary" :loading="decrementPending" @click='decrement'>Decrement -1</vue-button>
          <vue-headline level="3">Count is \{{ count }}</vue-headline>
        </vue-grid-item>
      </vue-grid-row>
    </vue-grid>
  </div>
</template>

<script lang="ts">{{#if wantVuex}}
import { mapActions, mapGetters } from 'vuex';
import { registerModule } from '@/app/store';
import { {{ properCase moduleName }}Module } from '../module';
import { IPreLoad } from '@/server/isomorphic';{{/if}}
import VueGrid from '@/app/shared/components/VueGrid/VueGrid.vue';
import VueGridItem from '@/app/shared/components/VueGridItem/VueGridItem.vue';
import VueButton from '@/app/shared/components/VueButton/VueButton.vue';
import VueGridRow from '@/app/shared/components/VueGridRow/VueGridRow.vue';
import VueHeadline from '@/app/shared/components/VueHeadline/VueHeadline.vue';

export default {
  metaInfo:   {
    title: '{{ properCase componentName }}',
  },
  components: {
    VueGrid,
    VueGridItem,
    VueButton,
    VueGridRow,
    VueHeadline,
  },
  methods: {
{{#if wantVuex}}    ...mapActions('{{ camelCase moduleName }}', ['increment', 'decrement']),{{/if}}
  },
  computed: {
{{#if wantVuex}}    ...mapGetters('{{ camelCase moduleName }}', ['count', 'incrementPending', 'decrementPending']),{{/if}}
  },{{#if wantVuex}}
  beforeCreate() {
    registerModule('{{ camelCase moduleName }}', {{ properCase moduleName }}Module);
  },
  prefetch: (options: IPreLoad) => {
    registerModule('{{ camelCase moduleName }}', {{ properCase moduleName }}Module);
    return options.store.dispatch('{{ camelCase moduleName }}/increment');
  },{{/if}}
};
</script>

<style lang="scss" module>
@import "~@/app/shared/design-system";

.{{ camelCase componentName }} {
  margin-top: $nav-bar-height;
  min-height: 500px;
}
</style>
